<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<h1>{{a}}</h1>
			<button @click="zeng" v-if="a<10">增加</button>
			<button @click="zeng" v-else="a=10" disabled>增加</button>
			<button @click="jian" v-if="a>1">减少</button>
			<button @click="jian" v-else="a=1" disabled>减少</button>
		</div>
	</body>
	<script src="vue.js"></script>
	<script>
		const { createApp, ref } = Vue;
		const app = createApp({
			setup() {
				let a = ref(1)
				function zeng(){
					a.value++;
				}
				function jian(){
					a.value--;
				}
				return {
					a,
					zeng,
					jian
				}
			}
		}).mount('#app')
	</script>
</html>